<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.1&key=897c37791dedfb7693f32913be501911&plugin=AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch'></script>
    <title>选择坐标</title>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
        padding: 0;
        overflow: hidden;
        font-size: 13px;
    }
    
    .map {
        height: 100%;
        width: 60%;
        float: left;
    }
    
    #right {
        color: #444;
        background-color: #f8f8f8;
        width: 40%;
        float: left;
        height: 100%;
    }
    
    #start,
    #stop,
    #right input {
        margin: 4px;
        margin-left: 15px;
    }
    
    .title {
        width: 100%;
        background-color: #dadada
    }
    
    button {
        border: solid 1px;
        margin-left: 15px;
        background-color: #dadafa;
    }
    
    .c {
        font-weight: 600;
        padding-left: 15px;
        padding-top: 4px;
    }
    
    #lnglat,
    #address,
    #nearestJunction,
    #nearestRoad,
    #nearestPOI,
    .title {
        padding-left: 15px;
    }
    </style>
</head>

<body>
    <div id="container" class="map" tabindex="0"></div>
	<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>请输入关键字：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput"/>
            </td>
        </tr>
    </table>
</div>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
        var map = new AMap.Map('container', {
            zoom: 16,
            scrollWheel: false,
			center: [parent.$("#lng").val(), parent.$("#lat").val()]
        })
		//输入提示
		var autoOptions = {
			input: "tipinput"
		};
		var auto = new AMap.Autocomplete(autoOptions);
		var placeSearch = new AMap.PlaceSearch({
			map: map
		});  //构造地点查询类
		AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
		function select(e) {
			placeSearch.setCity(e.poi.adcode);
			placeSearch.search(e.poi.name);  //关键字查询查询
		}
        var positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map
        });
        positionPicker.on('success', function(positionResult) {
			console.log(positionResult.position);
			parent.$("#lng").val(positionResult.position.lng);
			parent.$("#lat").val(positionResult.position.lat);
			//parent.$("#address").val(positionResult.address);
        });
        var onModeChange = function(e) {
            positionPicker.setMode(e.target.value)
        }
        positionPicker.start();
    });
    </script>
</body>

</html>